import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores'
import Nprogress from 'nprogress' // 需要安装类型申明文件  yarn add  @types/nprogress
import 'nprogress/nprogress.css'
const router = createRouter({
  // vue2 mode:'hash/history/abstract'
  // hash: hash值改变做的处理和hashchange监听事件处理
  // vue3:createWebHashHistory
  // history:改变浏览器的历史记录，同时也改变了url
  // history.pushState(修改history内的state的值,没什么特别作用,改变location里的pathname(url地址上的路由地址))
  // history.replaceState

  // 每一个path前面都要有/xxx
  // import.meta.env.BASE_URL读取了vite.config.js内的base的值，默认是/

  /*
   路由传值
     vue2
     query
       传：
         this.$router.push('/xxx?参数名=值')
       收
         this.$route.query.参数名
     params:优势：能传递大数据,缺点：刷新数据就没了
       传
         this.$router.push({
           name:'xxx',
           params:{
            参数名:值
           }
         })
       收
         this.$route.params.参数名
     动态路由匹配 
       配制路由
         {
          path:'/xxx/:id'
         } 
         传
          this.$router.push('/xxx/123')
          收
        this.$route.params.id

     vue3路由传值，只有二种
       query
         传
           const router=useRouter()
           router.push("/xxx?参数名=值")
         收
          const route=useRoute()
          route.query.参数名

       动态路由匹配
        配制路由
         {
          path:'/xxx/:id'
         } 
        传
          const router=useRouter()
          router.push('/xxx/123')
        收          
           const route=useRoute()
           route.params.id




*/

  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/playground', // /xxx/playground
      component: () => import('@/views/playGround/index.vue'),
      meta: {
        title: '演示页'
      }
    },
    {
      path: '/',
      name: 'Layout',
      redirect: '/home',
      component: () => import('@/views/layout/index.vue'),
      meta: {
        title: 'layout'
      },
      children: [
        // /  绝对地址  /xxx==/xxx   不以/开头，叫相对地址，相对于父级， aaa就是和父级拼接
        {
          path: 'home',
          component: () => import('@/views/home/index.vue'),
          meta: {
            title: '首页'
          }
        },

        {
          path: 'article',
          component: () => import('@/views/article/index.vue'),
          meta: {
            title: '健康百科'
          }
        },
        {
          path: 'notify',
          component: () => import('@/views/notify/index.vue'),
          meta: {
            title: '消息中心'
          }
        },
        {
          path: 'user',
          component: () => import('@/views/user/index.vue'),
          meta: {
            title: '我的'
          }
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/login/index.vue'),
      meta: {
        title: '登录'
      }
    },
    {
      path: '/user/patient',
      component: () => import('@/views/user/patient-page.vue'),
      meta: { title: '家庭档案' }
    },
    {
      path: '/consult/fast',
      component: () => import('@/views/consult/consult-fast.vue'),
      meta: { title: '极速问诊' }
    },
    {
      path: '/consult/dep',
      component: () => import('@/views/consult/consult-dep.vue'),
      meta: { title: '极速问诊' }
    },
    {
      path: '/consult/illness',
      component: () => import('@/views/consult/consult-illness.vue'),
      meta: { title: '病情描述' }
    },
    {
      path: '/consult/pay',
      component: () => import('@/views/consult/consult-pay.vue'),
      meta: { title: '问诊支付' }
    },
    {
      path: '/room',
      component: () => import('@/views/room/index.vue'),
      meta: { title: '问诊室' }
    },
    {
      path: '/user/consult',
      component: () => import('@/views/user/consult-page.vue'),
      meta: { title: '问诊记录' }
    },
    {
      path: '/order/pay',
      component: () => import('@/views/order/order-pay.vue'),
      meta: { title: '药品支付' }
    },
    {
      path: '/order/pay/result',
      component: () => import('@/views/order/order-pay-result.vue'),
      meta: { title: '药品支付结果' }
    },
    {
      path: '/order/:id',
      component: () => import('@/views/order/order-detail.vue'),
      meta: { title: '药品订单详情' }
    },
    {
      path: '/order/logistics/:id',
      component: () => import('@/views/order/order-logistics.vue'),
      meta: { title: '物流详情' }
    },
    {
      path: '/login/callback',
      component: () => import('@/views/login/login-callback.vue'),
      meta: { title: 'QQ登录-绑定手机' }
    }
  ]
})

// 前置守卫
const whiteList = ['/login', '/login/callback']
// Nprogress.configure({ showSpinner: false })
router.beforeEach((to, from) => {
  Nprogress.start()
  // router :以前 to, from, next   next()
  // router  现在 也可以用三个参数，但推荐只写二个  return 地址 代替以前的   next(地址)  不写return  next()
  // 没有token，且不在白名单的页面就跳转到登录页
  const userStore = useUserStore()
  // to:{path:路由地址}
  if (!userStore.userInfo?.token && !whiteList.includes(to.path)) {
    return '/login?redirect=' + to.fullPath
  }
})
// 后置守卫  网站标题
router.afterEach((to, from) => {
  // console.log('to', to)
  Nprogress.done()
  document.title = '优医问诊-' + to.meta.title
})

export default router
